import React from 'react';
import {inject, observer} from 'mobx-react';
import {Spin, Button, Modal, Tooltip} from 'antd';
import {WeaNewScroll,WeaLeftRightLayout,WeaOrgTree,WeaTop, WeaRightMenu,WeaAlertPage,WeaPopoverHrm,WeaLocaleProvider} from 'ecCom';
import OtherInfoSearchGroup from './OtherInfoSearchGroup';
import DateSearchGroup from './DateSearchGroup';
const toJS = mobx.toJS;
const confirm = Modal.confirm;
import * as Util from '../../../util/Util';
const getLabel = WeaLocaleProvider.getLabel;
@inject ('planBaseStore')
@observer
export default class PlanBase extends React.Component {
  constructor (props) {
    super (props);
    this.state = {
      _height: Util.getCurrentHeight (),
      currentNode: null,
    };
    this.store = this.props.planBaseStore;
  }
  componentWillMount () {
    //一些初始化请求
    const {planBaseStore} = this.props;
    planBaseStore.getBasicSetting ({});
  }
  componentWillReceiveProps (nextProps) {
    const {planBaseStore} = this.props;
    if (this.props.location.key !== nextProps.location.key) {
      // 手动刷新、切换菜单 重新初始化
      planBaseStore.getBasicSetting ({});
    }
  }
  componentDidMount () {}
  getMenus = () => {
    let buttons = [];
    let menus = [];
    const {canedit, candel} = this.store;
    let {treeNodeData} = this.store;
    let _this = this;
    //保存
    buttons.push (
      <Tooltip title={getLabel('31103','保存设置') }>
        <Button type="primary"
          onClick={() => this.doSave()}>{getLabel('86','保存') }</Button>
      </Tooltip>
    );
    menus.push ({
      key: '0',
      icon: <i className="icon-coms-Save-as" />,
      content: getLabel('86','保存') ,
      onClick: () => {this.doSave()},
    });

    //应用到下级分部
    if (treeNodeData.resourcetype == '2') {
      buttons.push (
        <Tooltip title={getLabel('508740','应用到下级分部') }>
          <Button type="primary" onClick={() => { this.doSync() }}>
            {getLabel('508740','应用到下级分部') }
          </Button>
        </Tooltip>
      );
      menus.push ({
        key: '1',
        icon: <i className="icon-coms-organization-down" />,
        content: getLabel('508740','应用到下级分部') ,
        onClick: () => {this.doSync()},
      });
    }

    //删除
    if (candel) {
      buttons.push (
        <Tooltip title={getLabel('508970','删除基础设置') }>
          <Button type="primary" onClick={() => {this.doDelete()}}>
            {getLabel('91','删除') }
          </Button>
        </Tooltip>
      );
      menus.push ({
        key: '2',
        icon: <i className="icon-coms-delete" />,
        content: getLabel('91','删除') ,
        onClick: () => {this.doDelete()},
      });
    }
    let result = {
      buttons,
      menus,
    };
    return canedit && this.state.currentNode != null ? result : [];
  };
  //保存
  doSave(){
    let _this = this;
    confirm ({
      title: getLabel('508972','确认提示') ,
      content: getLabel('508973','确认保存此设置吗?'),
      onOk () {
        _this.doOperation ('save');
      },
      onCancel () {},
    });
  }
  //删除
  doDelete(){
    let _this = this;
    confirm ({
      title: getLabel('508972','确认提示') ,
      content: getLabel('508974','确认删除此设置吗?'),
      onOk () {
        _this.doOperation('del');
      },
      onCancel () {},
    });
  }
  //应用到下级分部
  doSync = () => {
    let _this = this;
    confirm ({
      title: getLabel('508972','确认提示') ,
      content: getLabel('508976','确定要应用到下级分部吗?'),
      onOk () {
        _this.doOperation ('sync');
      },
      onCancel () {},
    });
  };

  onTreeNodeClick = (event, ids, nodeids, nodes) => {
    const {planBaseStore} = this.props;
    if (nodes[0]) {
      planBaseStore.treeNodeData.resourcename = nodes[0].name;
    }

    this.setState ({currentNode: ids});
    let nodeIds = nodeids[0].split ('__');
    let resourcetype = parseInt (nodeIds[0]) + 1;
    let resourceid = nodeIds[1];

    let {treeNodeData} = planBaseStore;
    treeNodeData.resourcetype = resourcetype;
    treeNodeData.resourceid = resourceid;
    let {formParams} = planBaseStore;
    formParams.resourcetype = resourcetype;
    formParams.resourceid = resourceid;
    planBaseStore.getBasicSetting ({resourceid:resourceid,resourcetype:resourcetype});
  };

  doOperation = operation => {
    const {planBaseStore} = this.props;
    let {treeNodeData} = planBaseStore;
    let formParams = toJS (planBaseStore.getFormParams ());
    formParams.operation = operation;
    formParams.resourceid = treeNodeData.resourceid;
    formParams.resourcetype = treeNodeData.resourcetype;
    planBaseStore.basicSettingOperation (formParams);
  };

  render () {
    const {_height, currentNode} = this.state;
    const {planBaseStore} = this.props;
    let {titlename} = planBaseStore;
    return (
      <div className="wea-workrelate-plan-base">
        <WeaRightMenu datas={this.getMenus ().menus} showUrlItem={false} style={{height: '100%'}}>
          <WeaTop
            title={titlename}
            icon={<i className="icon-coms-ModelingEngine-o" />}
            iconBgcolor="rgb(150, 53, 138)"
            buttons={this.getMenus ().buttons}
            showDropIcon={true}
            dropMenuDatas={this.getMenus ().menus}
          />
          <WeaLeftRightLayout
            leftCom={
              <WeaNewScroll height={_height - 80}>
                <WeaOrgTree
                  isLoadUser={true}
                  treeNodeClick={this.onTreeNodeClick}
                  needSearch={true}
                  isLoadSubDepartment={true}
                />
              </WeaNewScroll>
            }
            leftWidth={180}
            onCollapse={showLeft => {}}
          >
            <Spin spinning={planBaseStore.loading}>
              {currentNode == null
                ? <div style={{position: 'relative', height: 230}}>
                    <WeaAlertPage {...this.state}>
                      <div style={{color: '#F00'}}>
                        {getLabel('508977','请点击左侧组织结构查看或设置对应计划报告基础项！') }
                      </div>
                    </WeaAlertPage>
                  </div>
                : <div>
                    <WeaNewScroll height={_height - 80}>
                      {/** 报告起止时间 */}
                      <DateSearchGroup />
                      {/** 其他信息 */}
                      <OtherInfoSearchGroup />
                    </WeaNewScroll>
                  </div>}
            </Spin>
          </WeaLeftRightLayout>
        </WeaRightMenu>
        <WeaPopoverHrm />
      </div>
    );
  }
}
